.list
    padding: 1rem

    .item
        @extend %card-dis
        @include font(14px)
        display: block
        color: var(--text-p2)

        .type
            @include font(bold)
            margin-right: .5rem

        // .title

        &:not(.dir):hover
            @extend %card-hov
            .count
                color: var(--text-link)

        &.dir
            @include font(14px)
            padding: .6rem 1rem;
            margin-bottom: .5rem
            background: var(--bg-card)
            box-shadow: var(--shdw)
            display: flex
            line-height: 1.2

            .seperator
                margin: 0 1px

            .subdir
                color: var(--text-p1)
                &:hover
                    color: var(--text-link)
                    text-decoration: underline

    &.categories
        .count
            @include font(13px, bold, --text-p4)
            float: right
            line-height: 1.4

    &.tags
        padding: calc(1rem - 4px)

        .card
            @extend %card-dim
            padding: .4rem .75rem

            @include transition(background .1s)
            display: inline-flex
            margin: 4px

            span
                &.sign
                    @include transition(color .1s)
                    @include font(13px, bold, --text-p4)
                    padding-right: 3px
                &.title
                    @include font(13px, --text-p2)

            &:hover
                @extend %card
                padding: .4rem .75rem

                .sign
                    color: var(--text-link)